<template>
	<div class="group_book">
		<div class="skl_nav">
			<div class="skl_lef" @click="retreat">
				<van-icon name="arrow-left" />
			</div>
			<div class="skl_title">
				拼团
			</div>
			<div class="skl_rid">
				<van-icon name="ellipsis" />
			</div>
		</div>
		
		<!-- <div class="comdList"> -->	
			<div class="gb_fm">
				<div class="gb_top">
					<div></div>
				</div>
				<div class="commd_list">
					<div class="itens">
						<div class="nine_title">
							<div>
								<div class="bor_but"></div>
								<div class="bor_rad"></div>
								<div class="nine_txt">逛逛好货</div>
								<div class="bor_rad"></div>
								<div class="bor_but"></div>
							</div>
						</div>
						
						<div ref='wrapper' class="comd" :style="{ height: (wrapperHeight-50) + 'px' }">
							<mt-loadmore :top-method="loadTop"
										:bottom-method="loadBottom"
										:bottom-all-loaded="allLoaded"
										:auto-fill="false"
										ref="loadmore">
						<div class="mint-load">
							  <ul 
								v-if="commodityList.length!=0" 
								class="goods_list"
							  >
								<li v-for="(item,i) in commodityList" :key='i'>
									<div class="good_img"  @click="lookDetails(item)">
										<img :src="item.product_image_url">
									</div>
									<div  class="item">
										<div class="good_title">
											<p class="title van-ellipsis">{{item.name}}</p>
											<p class="count">已拼:665件</p>
										</div>
										
										<div class="pce_sum">
											<div>
												<p class="price1"><span>单买价:￥{{item.price*2}}</span></p>
												<p class="price"><span>￥{{item.price}}</span></p>
											</div>
											<div  class="s_price_but"  @click="lookDetails(item)">
												<van-button round size="small" type="danger">马上抢</van-button>
											</div>
										</div>
									</div>
								</li>
							  </ul>
							
							<div class="loading_finish" v-show="allLoaded">
							  没有更多的数据了！
							</div>
						</div>	
						</mt-loadmore>
						</div>
					</div>
				</div>
			</div>
		<van-tabbar v-model="active" active-color="#ee0a24">
		  <van-tabbar-item icon="wap-home" @click="cdHome">首页</van-tabbar-item>
		  <van-tabbar-item icon="balance-list" @click="cdGbList">我的拼团</van-tabbar-item>
		</van-tabbar>
		
		<loading v-show="bool"></loading>
	</div>
</template>

<script>
	import loading from '../purchase/loading.vue';
	export default {
			data() {
				return {
					commodityList:[],
					bool:false,//加载框
					pageNumBottom:1,//页数
					allLoaded:false,//是否上拉
					active: 0,
					wrapperHeight:0,//自适应高度
				}
			},
			created(){
				this.seckillList();
			},
			mounted() {
				// 父控件要加上高度，否则会出现上拉不动的情况
				   this.wrapperHeight =
				     document.documentElement.clientHeight -
				     this.$refs.wrapper.getBoundingClientRect().top;
			},
			methods: {
				//商品详细
				lookDetails(item){
					this.$router.push({path:"/groupCommodityDetail",query:{
						id:item.id
					}})
				},
				//商品列表
				async seckillList(params=null){
						  if(params){
							 params={
							      pageNum:1,//页码
							      pageSize:10,//每页条数
							      salesMode:7,//商品类型，7普通商品，8动感地带，9实体联盟，10九块九包邮，11秒杀
							      // activityTime:"13",//
							 }; 
						  }
				     this.bool=true; 
				    const res = await this.$axios.post(this.$api.shopListData, params);
				    if (res.success) {
				      this.commodityList = res.data.list;
						console.log(res);
				    } else {
				      this.$toast(res.msg);
				    }
				    this.bool=false;
				},
				//上拉刷新·
				loadTop() {
					this.loadFrist();
					console.log('上拉刷新')
				},
				
				loadBottom() {
					this.loadMore();
				},
				 // 下来刷新加载
				async loadFrist() {
					this.$store.commit('noLoadEnabled');
					this.pageNumBottom = 1;
					let params={
						  pageNum:this.pageNumBottom,//页码
						  pageSize:10,//每页条数
						  salesMode:10,//商品类型，7普通商品，8动感地带，9实体联盟，10九块九包邮，11秒杀
						  // activityTime:"13",//
						 }; 
					const res = await this.$axios.post(this.$api.shopListData, params);
					if (res.success) {
						this.commodityList = res.data.list;
						this.$refs.loadmore.onTopLoaded();
						console.log(res)
					} else {
					  this.$toast(res.msg);
					}
					this.$store.commit('yesLoadEnabled');
				},
				// 加载更多
				async loadMore() {
					this.$store.commit('noLoadEnabled');
				  this.pageNumBottom += 1;
				  let  params={
					  pageNum:this.pageNumBottom,//页码
					  pageSize:10,//每页条数
					  salesMode:7,//商品类型，7普通商品，8动感地带，9实体联盟，10九块九包邮，11秒杀
					  // activityTime:"13",//
					}; 
				  const res = await this.$axios.post(this.$api.shopListData, params);
				  if (res.success) {
					  this.commodityList = this.commodityList.concat(res.data.list);
					  this.isHaveMore(res.data.nextPage);
					  
					  this.$refs.loadmore.onBottomLoaded();
				  } else {
				    this.$toast(res.msg);
				  }
				  this.$store.commit('yesLoadEnabled');
				},
				
				isHaveMore:function(isHaveMore){
				  // 是否还有下一页，如果没有就禁止上拉刷新
				  this.allLoaded = true; //true是禁止上拉加载
				  if(isHaveMore){
				    this.allLoaded = false;
				  }
				},
				//后退
				retreat() {
					if (window.history.length <= 1) {
						this.$router.push({path:'/'})
					} else {
						this.$router.go(-1);
					}
				},
				cdHome(){
					this.$router.push('/')
				},
				cdGbList(){
					this.$router.push('/groupBookingRecord')
				}
			},
			components:{
				loading
			}
		}
</script>

<style lang="scss" scoped>
	.group_book {
		.gb_fm{
			background-image: linear-gradient(to top, #F7B739 -79%, #FF1928 69%);
			padding-bottom: 5px;
		}
		.gb_top {
			
			div{
				width: 100%;
				height: 254px;
				background: url('https://image.soole.com.cn/000124d54a8093c0c98fb18c880e.png');
				background-repeat: no-repeat;
				background-size: 100%, 100%;	
			}
			
		}
		.skl_nav {
			top: 0;
			left: 0;
			width: 100%;
			position: fixed;
			line-height: 51px;
			user-select: none;
			text-align: center;
			color: white;
			z-index: 100;
			background-color: #FF1928;
			.skl_lef {
				bottom: 0;
				left: 7px;
				font-size: 23px;
				position: absolute;
			}
		
			.skl_title {
				margin: 0 auto;
				// 
				font-size: 16px;
				font-weight: 500;
			}
		
			.skl_rid {
				bottom: 0;
				right: 7px;
				font-size: 17px;
				position: absolute;
				// line-height: 41px;
			}
		}
		.comd{
			overflow: scroll;
		}
		
	}

.van-button--small{
        min-width: 70px;
        margin-top: 7px;
        font-size: 14px;
        line-height: 25px;
    }

	.commd_list {
		// background-image: linear-gradient(to top, #F7B739 -79%, #FF1928 69%);
		padding: 0 8px;
		.nine_title {
			margin-bottom: 14px;
			.bor_but {
				width: 16px;
				border-bottom: 2px solid #FC2A4C;
				position: relative;
				bottom: 8px;
			}

			.bor_rad {
				width: 5px;
				height: 5px;
				background-color: #FC2A4C;
				border-radius: 50%;
				position: relative;
				bottom: -17px;
				margin: 0 9px;
			}

			.nine_txt {
				color: #FC2A4C;
				font-size: 15px;
				position: relative;
				bottom: -9px;
				margin: 0 8px;
				font-weight: 700;
			}
		}

		.nine_title>div {
			display: flex;
			width: 50%;
			height: 28px;
			margin: 0 auto;
			position: relative;
			text-align: center;
			justify-content: center;

		}

		.itens {
			background-color: #FFFFFF;
			padding-top: 8px;
			// min-height: 450px;
		}
		.loading{
			width: 100%;
			height: 41px;
			display: flex;
			justify-content: center;
		}
		.goods_list {
			.item{
				width: 65%;
			}
			li {
				display: flex;
				width: 100%;
				background-color: #FFFFFF;
				border-radius: 5px;
				box-sizing: border-box;
				padding: 10px;
				margin-bottom: 6px;
				margin-right: 6px;
			}
			.good_title{
				.title {
					color: #141414;
					font-size: 14px;
					margin-top: 9px;
					width: 220px;
				}
				.count{
					font-size: 13px;
					color: #666666;
					margin-bottom: 24px;
				}
			}
			

			.pce_sum {
				display: flex;
				justify-content: space-between;
				.price {
					font-size: 15px;
					font-weight: 600;
					color: #F82E2E;
					margin-right: 10px;
				}

				.price1 {
					color: #999999;
					font-size: 12px;
					text-decoration: line-through;
				}
			}
			
		}
		.good_img {
			min-width: 109px;
			// min-height: 109px;
			// max-width: 109px;
			max-width: 109px;
			height: 109px;
			width: 30%;
			margin-right: 10px;
		}

		img {
			width: 100%;
			height: 100%;
			
		}
	}
</style>
